<%@ page import="gdepot.Goods" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main">
    <g:set var="entityName" value="${message(code: 'goods.label', default: 'Goods')}"/>
    <title><g:message code="default.list.label" args="[entityName]"/></title>

    <link rel="stylesheet" type="text/css" href="${createLinkTo(dir: 'css', file: 'bootstrap.min.css')}"/>
    <link rel="stylesheet" type="text/css" href="${createLinkTo(dir: 'css', file: 'agency.css')}"/>
    <link rel="stylesheet" type="text/css"
          href="${createLinkTo(dir: 'font-awesome/css', file: 'font-awesome.min.css')}"/>
    %{--
          <script>
              function itemNumberChange(){
                  var result=confirm("${message(code: 'cart.itemNumberUpdate.confirm')}")
                  if(result){
                      $("#changeItemNumberForm").submit()
                      return true
                  }
                  $("#itemNumberUpdate").val($("#hiddenItemNumber").val())
                  return false

              }
          </script>--}%

</head>

<body>

%{--
<div id="list-goods" class="content scaffold-list" role="main">

--}%


<g:if test="${flash.message}">
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">
        &times;
        </a>
        <strong>${flash.message}</strong>
    </div>
</g:if>


%{--		<td style="width: 500px">
            <g:link action="show" id="${goodsInstance.id}">
                ${fieldValue(bean: goodsInstance, field: "title")}
            </g:link><br/>
            Category:${goodsInstance.category?.categoryName}<br/>
            Description:${fieldValue(bean: goodsInstance, field: "description")}<br/>
            Pricce: ${fieldValue(bean: goodsInstance, field: "price")}
            <g:form controller="cart" method="POST">
                <input type="hidden" name="goodsId" value="${goodsInstance.id}">
                <g:actionSubmit action="addToCart" value="${message(code: 'cart.addToCart')}"/>
            </g:form>
        </td>--}%

<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Book List</h2>

                <h3 class="section-subheading text-muted">Here you can choose your favorite book</h3>
            </div>
        </div>

        <div class="row">
            <g:each in="${goodsInstanceList}" status="i" var="goodsInstance">
                <div class="col-md-4 col-sm-6 portfolio-item" style="width: 350px">
                    <a href="#${goodsInstance?.id}" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                    %{--<img src="img/portfolio/roundicons.png" class="img-responsive" alt="">--}%
                        <g:if test="${goodsInstance.photoUrl?.startsWith('http')}">
                            <img src="${fieldValue(bean: goodsInstance, field: 'photoUrl')}" class="img-responsive"
                                 style="width: 350px;height: 350px">
                        </g:if>
                        <g:else>
                            <img src="${createLinkTo(dir: 'payload', file: '' + goodsInstance.photoUrl)}"
                                 class="img-responsive" alt="${goodsInstance.photoUrl}"
                                 title="${goodsInstance.photoUrl}" style="width: 350px;height: 350px">
                        </g:else>
                    </a>

                    <div class="portfolio-caption" style="font-size: 10px;">
                        <h4>${fieldValue(bean: goodsInstance, field: "title")}</h4>

                        <p class="text-muted">Description:${fieldValue(bean: goodsInstance, field: "description")}<br/>
                        </p>

                        <p class="text-muted">Pricce: ${fieldValue(bean: goodsInstance, field: "price")} 元</p>
                        <g:form controller="cart" method="POST">
                            <input type="hidden" name="goodsId" value="${goodsInstance.id}">
                            <g:actionSubmit class="btn btn-primary" action="addToCart"
                                            value="${message(code: 'cart.addToCart')}"/>
                        </g:form>
                    </div>
                </div>
            </g:each>
        </div>
    </div>
</section>

<!-- Portfolio Modal 2 -->
<g:each in="${goodsInstanceList}" status="i" var="goodsInstance">
    <div class="portfolio-modal modal fade" id="${goodsInstance?.id}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>

            <div class="container">

                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Book details</h2>

                            <p class="item-intro text-muted">Here we will show more details about the book.</p>

                            <div style="width: 350px; height: 350px; float: left;">
                                <g:if test="${goodsInstance.photoUrl?.startsWith('http')}">
                                    <img src="${fieldValue(bean: goodsInstance, field: 'photoUrl')}"
                                         class="img-responsive" style="width: 350px;height: 350px ;">
                                </g:if>
                                <g:else>
                                    <img src="${createLinkTo(dir: 'payload', file: '' + goodsInstance.photoUrl)}"
                                         class="img-responsive" alt="${goodsInstance.photoUrl}"
                                         title="${goodsInstance.photoUrl}" style="width: 350px;height: 350px">
                                </g:else>
                            </div>

                            <div style="width: 350px; height: 350px;float: right;">
                                <h4><g:link action="show" id="${goodsInstance.id}">
                                    ${fieldValue(bean: goodsInstance, field: "title")}
                                </g:link></h4>

                                <p>Category:${goodsInstance.category?.categoryName}<br/></p>
                                %{--<img class="img-responsive img-centered" src="img/portfolio/startup-framework-preview.png" alt="">--}%
                                <p>Author: ${fieldValue(bean: goodsInstance, field: "author")}</p>
                                <p>Publish: ${fieldValue(bean: goodsInstance, field: "publish")}</p>
                                <p>Description:${fieldValue(bean: goodsInstance, field: "description")}<br/></p>
                                <p>Pricce: ${fieldValue(bean: goodsInstance, field: "price")} 元</p>
                                <p>User： ${goodsInstance.user?.username}</p>
                            </div>

                            <p><a href="http://designmodo.com/startup/?u=787">GDepot</a> is a website builder for all users. GDepot contains kinds of books(such as computer,science,and so on) which can useful to you guys . Style of our website  is made in the same style, and can easily be used, hoping you can buy some books which you really like..
                            </p>

                            %{--<p>You can preview Startup Framework <a--}%
                                    %{--href="http://designmodo.com/startup/?u=787">here</a>.</p>--}%
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i
                                    class="fa fa-times"></i>Close Project</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</g:each>
<div class="pagination">
    %{--<g:paginate total="${goodsInstanceCount ?: 0}" />--}%
    <g:paginate total="${goodsInstanceList.totalCount}" params="${params}"/>
</div>
</body>
</html>
